<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/layui.css">
    <title>图表</title>
    <script src="../layui.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/echarts-wordcloud.min.js"></script>

</head>
<style>
    /* #seechartL,
    #seechartP,
    #seechartwd {
        width: 1000px;
        height: 600px;
    } */
</style>

<body>
    <div class="layui-container">
        <div class="layui-row">
            <!-- <div class="layui-col-md12"> -->
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>图表</legend>
            </fieldset>

            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">线/柱图</li>
                    <li>饼图</li>
                    <li>词云</li>
                    <li>流程图</li>
                    <li></li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">

                        <form class="layui-form" lay-filter="chartformL" action="">

                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="titled" value='水果销量' required lay-verify="required"
                                        placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">图例</label>
                                <div class="layui-input-block">
                                    <input type="text" name="legendl" value='["苹果","香蕉"]' required lay-verify="required"
                                        placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">X轴</label>
                                <div class="layui-input-block">
                                    <input type="text" name="xdataL"
                                        value='["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月"]' required
                                        lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">Y轴</label>
                                <div class="layui-input-block">
                                    <textarea name="ydataL" placeholder="请输入" id="areaL"
                                        class="layui-textarea">[[862,337,750,378,783,970,229,211,465,603],[602,759,948,797,431,495,805,306,707,925]]</textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" id="linebtn">
                                        确定
                                    </button>
                                    <label id="linewait" style="display: none;">
                                        正在生成图表请等待
                                    </label>
                                </div>
                            </div>
                        </form>
                        <div class="layui-form-item" id="seechartL">
                        </div>

                    </div>
                    <div class="layui-tab-item">

                        <form class="layui-form" lay-filter="chartformP" action="">

                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="titled" value='2019手机品牌市场占有率' required
                                        lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">数据</label>
                                <div class="layui-input-block">
                                    <textarea name="dataP" placeholder="请输入" id="areap" class="layui-textarea">[{"value": 14.7,"name": "Apple"},{"value": 10.4,"name": "Huawei"},{"value": 6.3,"name": "Xiaomi"},{"value": 21.6,"name": "Samsung"},{"value": 7.6,"name": "Oppo"},{"value": 39.4,"name": "others"}]
                                        </textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button type="button" class="layui-btn" id="piebtn">
                                    确定
                                </button>
                            </div>
                        </form>
                        <div class="layui-form-item" id="seechartP">
                        </div>

                    </div>
                    <div class="layui-tab-item">

                        <form class="layui-form" lay-filter="chartformwd" action="">

                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="titled" value='XX手机评论' required lay-verify="required"
                                        placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">数据</label>
                                <div class="layui-input-block">
                                    <textarea name="datawd" placeholder="请输入" id="areawd" class="layui-textarea">[{"name": "没有","value": 30},{"name": "屏幕","value": 24},{"name": "不错","value": 21},{"name": "可以","value": 19},{"name": "发货","value": 18}]
                                        </textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button type="button" class="layui-btn" id="wdcdbtn">
                                    确定
                                </button>
                            </div>
                        </form>
                        <div class="layui-form-item" id="seechartwd">
                        </div>


                    </div>
                    <div class="layui-tab-item">

                        <form class="layui-form" lay-filter="chartformflow" action="">

                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="titled" value='操作流程' required lay-verify="required"
                                        placeholder="请输入" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">项数据</label>
                                <div class="layui-input-block">
                                    <textarea name="datafl" placeholder="请输入" id="areafl" class="layui-textarea">[{"name":"打开","x":1,"y":30},{"name":"新建","x":70,"y":1},{"name":"修改","x":70,"y":30},{"name":"删除","x":70,"y":60},{"name":"确认删除","x":140,"y":60},{"name":"保存","x":140,"y":30},{"name":"关闭","x":210,"y":30}]
                                        </textarea>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">连接数据</label>
                                <div class="layui-input-block">
                                    <textarea name="dataflink" placeholder="请输入" id="areaflink" class="layui-textarea">[{"source":"打开","target":"新建"},{"source":"打开","target":"修改"},{"source":"打开","target":"删除"},{"source":"新建","target":"保存"},{"source":"修改","target":"保存"},{"source":"删除","target":"确认删除","value":"确认无误"},{"source":"确认删除","target":"关闭"},{"source":"保存","target":"关闭"}]
                                        </textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button type="button" class="layui-btn" id="flowtn">
                                    确定
                                </button>
                            </div>
                        </form>
                        <div class="layui-form-item" id="seechartflow">
                        </div>

                    </div>
                    <div class="layui-tab-item"></div>

                </div>
            </div>

            <!-- </div> -->

        </div>
    </div>
</body>
<script>
    //Line
    var optionL = {
        title: {
            text: ''
        },
        legend: {
            data: []
        },
        tooltip: {},
        toolbox: {
            feature: {
                dataView: { readOnly: false },
                magicType: {
                    type: ['line', 'bar']
                },
                saveAsImage: {}
            },

        },
        xAxis: {
            type: 'category',
            axisLabel: {
                rotate: 30
            },
            boundaryGap: false,
            // axisTick: {
            //     show: true,
            //     alignWithLabel: true,
            // },
            data: []
        },
        yAxis: {
            scale: true,
            type: 'value'
        },
        dataZoom: {
            type: 'inside',
        },
        series: []
    };


    var chartl = document.getElementById("seechartL");
    var mychartl = echarts.init(chartl, null, { width: 1100, height: 600 });

    var linewait = document.getElementById("linewait");
    layui.use(['layer', 'form', 'element'], function () {
        var layer = layui.layer
            , form = layui.form
            , element = layui.element;


        layui.$('#linebtn').on('click', function () {

            var datacL = form.val('chartformL');
            var datatit = datacL['titled'];
            if (datacL['legendl']) {
                try {
                    var legendl = JSON.parse(datacL['legendl']);
                } catch (err) {
                    layer.alert('输入图例数据格式有误！', { icon: 5 });
                }
            }
            if (datacL['xdataL']) {
                try {
                    var dataxl = JSON.parse(datacL['xdataL']);
                } catch (err) {
                    layer.alert('输入X数据格式有误！', { icon: 5 });
                }
            }
            if (datacL['ydataL']) {
                try {
                    var dataarr = JSON.parse(datacL['ydataL']);
                } catch (err) {
                    layer.alert('输入Y数据格式有误！', { icon: 5 });
                }
            }

            optionL.legend.data = [];
            optionL.xAxis.data = [];
            optionL.series = [];
            optionL.title = {};
            mychartl.clear();
            if (datacL['legendl'] && datacL['xdataL'] && datacL['ydataL']) {
                optionL.title.text = datatit;
                linewait.style.display = "block";
                optionL.legend.data = legendl;
                optionL.xAxis.data = dataxl;
                dataarr.map((item, index) => {
                    optionL.series.push({
                        name: legendl[index],
                        label: {
                            show: true,
                            color: 'inherit'
                        },
                        data: item,
                        type: 'line'
                    })
                })
                setTimeout(function () {
                    mychartl.setOption(optionL);
                    linewait.style.display = "none";
                }, 100)

            } else {

                layer.alert('输入！', { icon: 5 });
            }

        })
        // Pie
        var optionP = {
            title: {
                text: ''
            },
            legend: {},
            tooltip: {},
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: [50, 200],
                    roseType: 'area',
                    label: {
                        show: true,
                        formatter: '{b}：{c}',
                        color: 'inherit'
                    },
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: []
                }
            ]
        };
        var chartp = document.getElementById("seechartP");
        var mychartp = echarts.init(chartp, null, { width: 1100, height: 600 });
        layui.$('#piebtn').on('click', function () {
            var datacP = form.val('chartformP');
            optionP.series[0].data = [];
            optionP.title = {};
            mychartp.clear();
            var pietit = datacP['titled'];
            if (datacP['dataP']) {
                try {
                    var datap = JSON.parse(datacP['dataP']);
                } catch (err) {
                    layer.alert('输入数据格式有误！', { icon: 5 });
                }
                optionP.series[0].data = datap;
                optionP.title.text = pietit;
                mychartp.setOption(optionP);

            } else {
                layer.alert('输入！', { icon: 5 });
            }
        })

        // Wordcoud
        var optionwd = {
            title: {
                text: ''
            },

            tooltip: {
                show: true
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: { show: true }
                }
            },
            series: [{
                type: "wordCloud",
                gridSize: 6,
                shape: 'diamond',
                sizeRange: [12, 60],
                // width: 1100,
                // height: 600,

                drawOutOfBound: true,
                textStyle: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },

                data: [],
            }]

        };
        var chartwd = document.getElementById("seechartwd");
        var mychartwd = echarts.init(chartwd, null, { width: 1100, height: 600 });
        layui.$('#wdcdbtn').on('click', function () {
            var datacwd = form.val('chartformwd');
            optionwd.series[0].data = [];
            optionwd.title = {};
            mychartwd.clear();
            var wdtit = datacwd['titled'];

            if (datacwd['datawd']) {

                try {
                    var dataW = JSON.parse(datacwd['datawd']);
                } catch (err) {
                    console.log(err)
                    layer.alert('输入数据格式有误！', { icon: 5 });
                }
                optionwd.series[0].data = dataW;
                optionwd.title.text = wdtit;
                mychartwd.setOption(optionwd);

            } else {
                layer.alert('输入！', { icon: 5 });
            }
        })
        // 
        // graph
        var optionfl = {
            title: {
                text: ''
            },

            // tooltip: {
            //     show: true
            // },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: { show: true }
                }
            },
            series: [{
                type: "graph",
                symbol: 'roundRect',
                symbolSize: 20,
                edgeSymbol: ['', 'arrow'],
                edgeSymbolSize: [1, 12],
                itemStyle: {
                    color: '#1B293F'
                },
                edgeLabel: {
                    show: true,
                    color: '#1B293F',
                    fontSize: 14,
                    formatter: function (data) {
                        return data.value || ''
                    },
                    fontWeight: 'bold',
                },
                lineStyle: {
                    color: '#60281e',
                    opacity: 1,
                },
                label: {
                    show: true,
                    position: 'top',
                    fontSize: 15,
                    fontWeight: 'bold',
                    color: '#065279',
                    overflow: 'break',
                },

                data: [],
                links: []
            }]

        };
        var chartfl = document.getElementById("seechartflow");
        var mychartfl = echarts.init(chartfl, null, { width: 1100, height: 600 });
        layui.$('#flowtn').on('click', function () {
            var datacfl = form.val('chartformflow');
            optionfl.series[0].data = [];
            optionfl.series[0].links = [];
            optionfl.title = {};
            mychartfl.clear();
            var fltit = datacfl['titled'];
            if (datacfl['datafl']) {

                try {
                    var dataF = JSON.parse(datacfl['datafl']);
                } catch (err) {
                    console.log(err)
                    layer.alert('输入数据格式有误！', { icon: 5 });
                }
            }

            if (datacfl['dataflink']) {

                try {
                    var dataFk = JSON.parse(datacfl['dataflink']);
                } catch (err) {
                    console.log(err)
                    layer.alert('输入数据格式有误！', { icon: 5 });
                }
            }
            if (datacfl['datafl'] && datacfl['dataflink']) {
                optionfl.series[0].data = dataF;
                optionfl.series[0].links = dataFk;
                optionfl.title.text = fltit;

                mychartfl.setOption(optionfl);

            } else {
                layer.alert('输入数据！', { icon: 5 });
            }


        })





    });

</script>

</html>